<template>
	<view class="home-container">
		<!-- 顶部搜索栏 -->
		<view class="header">
			<view class="location-bar">
				<view class="location-info">
					<text class="location-icon">📍</text>
					<text class="location-text">长乐西路269号(朝阳门地铁站D东北口步行...</text>
					<text class="location-arrow">▼</text>
				</view>
				<view class="header-icons">
					<text class="icon">📋</text>
					<text class="icon">📞</text>
				</view>
			</view>
			<view class="search-bar">
				<view class="search-input">
					<text class="search-icon">🔍</text>
					<text class="search-placeholder">汉堡 外卖</text>
				</view>
				<view class="search-btn">搜索</view>
			</view>
		</view>

		<!-- 分类导航 -->
		<CategoryNav :categories="categories" @categoryClick="onCategoryClick" />

		<!-- 轮播图 -->
		<view class="banner-section">
			<swiper class="banner-swiper" indicator-dots="true" autoplay="true" interval="3000" duration="500">
				<swiper-item v-for="(item, index) in bannerList" :key="index">
					<view class="banner-item">
						<image :src="item.image" class="banner-image"></image>
						<view class="banner-content">
							<text class="banner-title">{{ item.title }}</text>
							<text class="banner-subtitle">{{ item.subtitle }}</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 商家列表 -->
		<view class="merchant-section" v-for="(merchant, merchantIndex) in merchantList" :key="merchantIndex">
			<!-- 商家头部信息 -->
			<view class="merchant-header">
				<view class="merchant-logo">
					<image :src="merchant.logo" class="logo-image"></image>
				</view>
				<view class="merchant-info">
					<view class="merchant-first-line">
						<view class="merchant-category">
							<text class="merchant-category-text">{{ merchant.category }}</text>
						</view>
						<text class="merchant-name">{{ merchant.name }}</text>
					</view>
					<view class="merchant-second-line">
						<text class="delivery-info">{{ merchant.deliveryInfo }}</text>
						<text class="distance-info">{{ merchant.distance }}</text>
					</view>
				</view>
				<view class="time-guarantee">
					<text class="guarantee-text">{{ merchant.timeInfo }}</text>
				</view>
			</view>
			
			<!-- 优惠券区域 -->
			<view class="coupons-row">
				<view class="coupon-tag red">11减10</view>
				<view class="coupon-tag red">已减</view>
				<view class="coupon-tag orange">11减10</view>
				<view class="coupon-tag orange">免减</view>
			</view>
			
			<!-- 菜品展示区域 -->
			<view class="products-section">
				<!-- 代金券卡片 -->
				<view class="voucher-card">
					<text class="voucher-symbol">¥</text>
					<text class="voucher-amount">10</text>
					<text class="voucher-condition">满11可用</text>
					<text class="voucher-label">百亿补贴</text>
					<view class="use-button">
						<text class="use-text">去使用</text>
					</view>
				</view>
				
				<!-- 菜品横向滚动 -->
				<scroll-view class="products-scroll" scroll-x="true" show-scrollbar="false">
					<view class="products-container">
						<view class="product-item" v-for="(dish, index) in merchant.dishes" :key="index">
							<view class="product-image-wrapper">
								<image :src="dish.image" class="product-image"></image>
								<view class="product-discount">
									<text class="discount-label">{{ dish.discount }}</text>
								</view>
							</view>
							<text class="product-name">{{ dish.name }}</text>
							<view class="product-price-row">
								<text class="product-current-price">¥{{ dish.currentPrice }}</text>
								<text class="product-original-price">{{ dish.originalPrice }}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 商品信息区域 -->
		<view class="products-info-section">
			<!-- 更多附近商家 -->
			<view class="nearby-merchants">
				<view class="nearby-header">
					<view class="location-icon">📍</view>
					<view class="nearby-text">
						<text class="nearby-title">更多附近商家</text>
						<text class="nearby-subtitle">为了更美 更快29分钟</text>
					</view>
					<view class="nearby-images">
						<view class="nearby-image" v-for="(item, index) in nearbyImages" :key="index">
							<view class="svg-image" v-html="generateFoodSVG(item.type, item.color)"></view>
						</view>
					</view>
					<text class="arrow-icon">›</text>
				</view>
			</view>
			
			<!-- 发现好物 -->
			<view class="discover-section">
				<view class="discover-header">
					<text class="discover-title">发现好物</text>
					<view class="discover-tag">
						<text class="tag-text">更多优惠推荐</text>
					</view>
				</view>
				
				<!-- 商品网格 -->
				<view class="products-grid">
					<view class="product-row" v-for="(row, rowIndex) in productRows" :key="rowIndex">
						<view class="product-card" v-for="(product, index) in row" :key="index">
							<view class="product-image-container">
								<view class="product-svg" v-html="generateProductSVG(product.type, product.colors)"></view>
								<view class="product-badge" v-if="product.badge">
									<text class="badge-text">{{ product.badge }}</text>
								</view>
							</view>
							<view class="product-details">
								<view class="product-header">
									<view class="product-tag" v-if="product.tag">
										<text class="tag-text">{{ product.tag }}</text>
									</view>
									<text class="product-shop">{{ product.shop }}</text>
									<text class="product-time">{{ product.time }}</text>
								</view>
								<text class="product-title">{{ product.title }}</text>
								<view class="product-pricing">
									<text class="product-discount">{{ product.discount }}</text>
									<view class="product-price-row">
										<text class="current-price">¥{{ product.currentPrice }}</text>
										<text class="original-price" v-if="product.originalPrice">¥{{ product.originalPrice }}</text>
										<view class="member-tag" v-if="product.isMember">
											<text class="member-text">会员惠</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue'
	import CategoryNav from '@/components/CategoryNav.vue'
	
	// 分类数据 - 增加更多分类以支持滚动
	const categories = ref([
		{ name: '外卖', icon: '🍔' },
		{ name: '超市', icon: '🛒' },
		{ name: '跑腿奶茶', icon: '🥤' },
		{ name: '买菜', icon: '🥬' },
		{ name: '生鲜', icon: '🥕' },
		{ name: '甜点', icon: '🍰' },
		{ name: '数码', icon: '📱' },
		{ name: '鲜花', icon: '🌹' },
		{ name: '水果', icon: '🍎' },
		{ name: '家电', icon: '🔌' },
		{ name: '医药健康', icon: '💊' },
		{ name: '美妆洗护', icon: '💄' },
		{ name: '母婴用品', icon: '🍼' },
		{ name: '服装鞋包', icon: '👕' },
		{ name: '运动户外', icon: '⚽' },
		{ name: '图书文具', icon: '📚' },
		{ name: '汽车用品', icon: '🚗' },
		{ name: '宠物用品', icon: '🐕' }
	])
	
	// 分类点击事件处理
	const onCategoryClick = (category) => {
		console.log('点击分类:', category)
		// 这里可以添加跳转逻辑
		uni.showToast({
			title: `点击了${category.name}`,
			icon: 'none'
		})
	}
	
	// 轮播图数据
	const bannerList = ref([
		{
			image: '/static/banner1.jpg',
			title: '助力抢15减12元券',
			subtitle: '立即参与'
		},
		{
			image: '/static/banner2.jpg', 
			title: '新用户专享',
			subtitle: '立减10元'
		}
	])
	
	// 商家数据
	const merchantList = ref([
		{
			logo: '/static/merchant-logo1.jpg',
			category: '美食餐厅',
			name: '亲亲里(民乐园万达)',
			deliveryInfo: '起送¥20 免费¥1.2',
			distance: '31分钟送达 1.6km',
			timeInfo: '超时20分钟免单',
			coupons: [
				{ text: '11减10', type: 'used' },
				{ text: '已减', type: 'used' },
				{ text: '11减10', type: 'available' },
				{ text: '免减', type: 'available' }
			],
			voucher: {
				amount: 10,
				desc: '满11可用 百亿补贴'
			},
			dishes: [
				{
					name: '酸汤黄牛肉汤',
					image: '/static/dish1.jpg',
					currentPrice: 16,
					originalPrice: 20,
					discount: '减10元'
				},
				{
					name: '双菇蒸蛋式汤',
					image: '/static/dish2.jpg',
					currentPrice: 8,
					originalPrice: 12,
					discount: '减10元'
				},
				{
					name: '精品海鲜蒸蛋',
					image: '/static/dish3.jpg',
					currentPrice: 8,
					originalPrice: 12,
					discount: '减10元'
				},
				{
					name: '牛肉丸',
					image: '/static/dish4.jpg',
					currentPrice: 10,
					originalPrice: 15,
					discount: '减10元'
				},
				{
					name: '招牌炒河粉',
					image: '/static/dish5.jpg',
					currentPrice: 18,
					originalPrice: 25,
					discount: '减10元'
				}
			]
		}
	])
	
	// 附近商家图片数据
	const nearbyImages = ref([
		{ type: 'burger', color: '#ff6b35' },
		{ type: 'pizza', color: '#ff9500' },
		{ type: 'drink', color: '#4CAF50' }
	])
	
	// 商品列表数据
	const productsList = ref([
		{
			type: 'noodles',
			colors: ['#ff6b35', '#ffab00'],
			badge: '小蜜蜂',
			tag: '主食目选',
			title: '吃货3蜂黄金套餐 1人份',
			shop: '小蜜蜂麻辣烫',
			time: '33分钟送达',
			discount: '好评率97%',
			currentPrice: '12.9',
			originalPrice: '41.9',
			isMember: true
		},
		{
			type: 'sushi',
			colors: ['#4CAF50', '#81C784'],
			badge: '',
			tag: '',
			title: '金枪鱼寿司套餐（5粒）1人份',
			shop: '池田寿司',
			time: '32分钟送达',
			discount: '好评率96%',
			currentPrice: '16.9',
			originalPrice: '32',
			isMember: true
		},
		{
			type: 'meat',
			colors: ['#8D6E63', '#A1887F'],
			badge: '老大爷',
			tag: '',
			title: '香辣卤牛肉拌粉+鸡蛋卤肉',
			shop: '老大爷重庆小面',
			time: '28分钟送达',
			discount: '好评率94%',
			currentPrice: '20.4',
			originalPrice: '32.8',
			isMember: true
		},
		{
			type: 'chicken',
			colors: ['#FFC107', '#FFD54F'],
			badge: '肯德基',
			tag: '',
			title: '炸鸡腿大王套餐3件+炸鸡翅',
			shop: '肯德基',
			time: '32分钟送达',
			discount: '好评率91%',
			currentPrice: '10.8',
			originalPrice: '24.8',
			isMember: true
		}
	])
	
	// 将商品数据按行分组（每行2个）
	const productRows = computed(() => {
		const rows = []
		for (let i = 0; i < productsList.value.length; i += 2) {
			rows.push(productsList.value.slice(i, i + 2))
		}
		return rows
	})
	
	// 动态生成食物SVG
	const generateFoodSVG = (type, color) => {
		const svgTemplates = {
			burger: `<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
				<circle cx="20" cy="20" r="18" fill="${color}" opacity="0.2"/>
				<path d="M10 18h20c2 0 2 2 0 2H10c-2 0-2-2 0-2z" fill="${color}"/>
				<circle cx="20" cy="15" r="8" fill="${color}" opacity="0.8"/>
				<rect x="12" y="22" width="16" height="3" rx="1" fill="${color}"/>
			</svg>`,
			pizza: `<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
				<circle cx="20" cy="20" r="18" fill="${color}" opacity="0.2"/>
				<path d="M20 8 L32 28 L8 28 Z" fill="${color}" opacity="0.8"/>
				<circle cx="18" cy="22" r="2" fill="#ff4757"/>
				<circle cx="24" cy="20" r="1.5" fill="#2ed573"/>
			</svg>`,
			drink: `<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
				<circle cx="20" cy="20" r="18" fill="${color}" opacity="0.2"/>
				<rect x="15" y="10" width="10" height="20" rx="2" fill="${color}" opacity="0.8"/>
				<rect x="17" y="8" width="6" height="3" rx="1" fill="${color}"/>
			</svg>`
		}
		return svgTemplates[type] || svgTemplates.burger
	}
	
	// 动态生成商品SVG
	const generateProductSVG = (type, colors) => {
		const [primary, secondary] = colors
		const svgTemplates = {
			noodles: `<svg width="120" height="80" viewBox="0 0 120 80" xmlns="http://www.w3.org/2000/svg">
				<rect width="120" height="80" rx="8" fill="#f5f5f5"/>
				<ellipse cx="60" cy="45" rx="35" ry="20" fill="${primary}"/>
				<path d="M30 35 Q60 25 90 35 Q60 45 30 35" fill="${secondary}"/>
				<circle cx="45" cy="40" r="3" fill="#ff4757"/>
				<circle cx="75" cy="42" r="2" fill="#2ed573"/>
			</svg>`,
			sushi: `<svg width="120" height="80" viewBox="0 0 120 80" xmlns="http://www.w3.org/2000/svg">
				<rect width="120" height="80" rx="8" fill="#f5f5f5"/>
				<ellipse cx="30" cy="45" rx="12" ry="8" fill="${primary}"/>
				<ellipse cx="60" cy="45" rx="12" ry="8" fill="${primary}"/>
				<ellipse cx="90" cy="45" rx="12" ry="8" fill="${primary}"/>
				<rect x="25" y="40" width="10" height="10" fill="${secondary}"/>
				<rect x="55" y="40" width="10" height="10" fill="${secondary}"/>
				<rect x="85" y="40" width="10" height="10" fill="${secondary}"/>
			</svg>`,
			meat: `<svg width="120" height="80" viewBox="0 0 120 80" xmlns="http://www.w3.org/2000/svg">
				<rect width="120" height="80" rx="8" fill="#f5f5f5"/>
				<ellipse cx="60" cy="45" rx="30" ry="15" fill="${primary}"/>
				<path d="M35 40 Q60 30 85 40 Q60 50 35 40" fill="${secondary}"/>
				<circle cx="50" cy="42" r="2" fill="#fff"/>
				<circle cx="70" cy="44" r="2" fill="#fff"/>
			</svg>`,
			chicken: `<svg width="120" height="80" viewBox="0 0 120 80" xmlns="http://www.w3.org/2000/svg">
				<rect width="120" height="80" rx="8" fill="#f5f5f5"/>
				<ellipse cx="45" cy="45" rx="15" ry="12" fill="${primary}"/>
				<ellipse cx="75" cy="45" rx="15" ry="12" fill="${primary}"/>
				<path d="M35 50 Q45 55 55 50" fill="${secondary}"/>
				<path d="M65 50 Q75 55 85 50" fill="${secondary}"/>
			</svg>`
		}
		return svgTemplates[type] || svgTemplates.noodles
	}
</script>

<style scoped>
.home-container {
	background-color: #f5f5f5;
	min-height: 100vh;
}

/* 顶部区域 */
.header {
	background-color: #fff;
	padding: 20rpx;
}

.location-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.location-info {
	display: flex;
	align-items: center;
	flex: 1;
}

.location-icon {
	color: #ff6b35;
	margin-right: 10rpx;
	font-size: 28rpx;
}

.location-text {
	color: #333;
	font-size: 28rpx;
	flex: 1;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.location-arrow {
	color: #999;
	margin-left: 10rpx;
	font-size: 24rpx;
}

.header-icons {
	display: flex;
	gap: 20rpx;
}

.icon {
	font-size: 32rpx;
	color: #666;
}

.search-bar {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.search-input {
	flex: 1;
	background-color: #f5f5f5;
	border-radius: 50rpx;
	padding: 20rpx 30rpx;
	display: flex;
	align-items: center;
}

.search-icon {
	color: #999;
	margin-right: 20rpx;
	font-size: 28rpx;
}

.search-placeholder {
	color: #999;
	font-size: 28rpx;
}

.search-btn {
	background-color: #ff6b35;
	color: #fff;
	padding: 20rpx 30rpx;
	border-radius: 50rpx;
	font-size: 28rpx;
}



/* 轮播图 */
.banner-section {
	margin: 20rpx;
	border-radius: 20rpx;
	overflow: hidden;
}

.banner-swiper {
	height: 300rpx;
}

.banner-item {
	position: relative;
	height: 100%;
	background: linear-gradient(135deg, #8B4513, #D2691E);
	display: flex;
	align-items: center;
	padding: 0 40rpx;
}

.banner-image {
	position: absolute;
	right: 40rpx;
	top: 50%;
	transform: translateY(-50%);
	width: 120rpx;
	height: 120rpx;
}

.banner-content {
	color: #fff;
}

.banner-title {
	font-size: 36rpx;
	font-weight: bold;
	display: block;
	margin-bottom: 10rpx;
}

.banner-subtitle {
	font-size: 24rpx;
	opacity: 0.9;
}

/* 商家列表 */
.merchant-section {
	background-color: #fff;
	margin: 20rpx;
	border-radius: 16rpx;
	padding: 24rpx;
}

/* 商家头部 */
.merchant-header {
	display: flex;
	align-items: flex-start;
	margin-bottom: 16rpx;
}

.merchant-logo {
	width: 88rpx;
	height: 88rpx;
	margin-right: 16rpx;
	flex-shrink: 0;
}

.logo-image {
	width: 100%;
	height: 100%;
	border-radius: 8rpx;
}

.merchant-info {
	flex: 1;
	margin-right: 16rpx;
}

.merchant-first-line {
	display: flex;
	align-items: center;
	margin-bottom: 8rpx;
}

.merchant-category {
	background-color: #4CAF50;
	padding: 4rpx 8rpx;
	border-radius: 4rpx;
	margin-right: 8rpx;
}

.merchant-category-text {
	font-size: 20rpx;
	color: #fff;
	line-height: 1;
}

.merchant-name {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	line-height: 1.2;
}

.merchant-second-line {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.delivery-info, .distance-info {
	font-size: 22rpx;
	color: #666;
	line-height: 1.2;
}

.time-guarantee {
	background-color: #ff9500;
	padding: 6rpx 12rpx;
	border-radius: 12rpx;
	flex-shrink: 0;
}

.guarantee-text {
	font-size: 20rpx;
	color: #fff;
	line-height: 1;
}

/* 优惠券区域 */
.coupons-row {
	display: flex;
	gap: 8rpx;
	margin-bottom: 16rpx;
}

.coupon-tag {
	padding: 6rpx 12rpx;
	border-radius: 4rpx;
	font-size: 20rpx;
	line-height: 1;
}

.coupon-tag.red {
	background-color: #ff4757;
	color: #fff;
}

.coupon-tag.orange {
	background-color: #fff;
	color: #ff4757;
	border: 1rpx solid #ff4757;
}

/* 菜品展示区域 */
.products-section {
	display: flex;
	gap: 16rpx;
}

/* 代金券卡片 */
.voucher-card {
	width: 120rpx;
	background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
	border-radius: 8rpx;
	padding: 16rpx 12rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	position: relative;
}

.voucher-symbol {
	font-size: 24rpx;
	color: #333;
	font-weight: bold;
	line-height: 1;
	margin-bottom: 2rpx;
}

.voucher-amount {
	font-size: 48rpx;
	color: #333;
	font-weight: bold;
	line-height: 1;
	margin-bottom: 8rpx;
}

.voucher-condition {
	font-size: 18rpx;
	color: #666;
	line-height: 1;
	margin-bottom: 4rpx;
}

.voucher-label {
	font-size: 18rpx;
	color: #666;
	line-height: 1;
	margin-bottom: 12rpx;
}

.use-button {
	background-color: #333;
	padding: 6rpx 12rpx;
	border-radius: 12rpx;
	width: auto;
	text-align: center;
	align-self: center;
}

.use-text {
	font-size: 18rpx;
	color: #fff;
	line-height: 1;
}

/* 菜品滚动区域 */
.products-scroll {
	flex: 1;
}

.products-container {
	display: flex;
	gap: 16rpx;
	padding-right: 16rpx;
}

.product-item {
	width: 160rpx;
	flex-shrink: 0;
}

.product-image-wrapper {
	position: relative;
	margin-bottom: 8rpx;
}

.product-image {
	width: 100%;
	height: 120rpx;
	border-radius: 8rpx;
}

.product-discount {
	position: absolute;
	top: 6rpx;
	left: 6rpx;
	background-color: #ff4757;
	padding: 4rpx 8rpx;
	border-radius: 4rpx;
}

.discount-label {
	font-size: 18rpx;
	color: #fff;
	line-height: 1;
	font-weight: bold;
}

.product-name {
	font-size: 24rpx;
	color: #333;
	line-height: 1.2;
	margin-bottom: 6rpx;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.product-price-row {
	display: flex;
	align-items: baseline;
	gap: 8rpx;
}

.product-current-price {
	font-size: 26rpx;
	color: #ff4757;
	font-weight: bold;
	line-height: 1;
}

.product-original-price {
	font-size: 20rpx;
	color: #999;
	text-decoration: line-through;
	line-height: 1;
}

/* 商品信息区域 */
.products-info-section {
	margin: 20rpx;
}

/* 更多附近商家 */
.nearby-merchants {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 24rpx;
	margin-bottom: 20rpx;
}

.nearby-header {
	display: flex;
	align-items: center;
	gap: 16rpx;
}

.location-icon {
	font-size: 32rpx;
	color: #ff6b35;
}

.nearby-text {
	flex: 1;
}

.nearby-title {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 4rpx;
}

.nearby-subtitle {
	font-size: 22rpx;
	color: #666;
}

.nearby-images {
	display: flex;
	gap: 8rpx;
}

.nearby-image {
	width: 60rpx;
	height: 60rpx;
	border-radius: 8rpx;
	overflow: hidden;
}

.svg-image {
	width: 100%;
	height: 100%;
}

.arrow-icon {
	font-size: 32rpx;
	color: #999;
}

/* 发现好物 */
.discover-section {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 24rpx;
}

.discover-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24rpx;
}

.discover-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.discover-tag {
	background-color: #ff4757;
	padding: 6rpx 12rpx;
	border-radius: 12rpx;
}

.discover-tag .tag-text {
	font-size: 20rpx;
	color: #fff;
}

/* 商品网格 */
.products-grid {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.product-row {
	display: flex;
	gap: 16rpx;
}

.product-card {
	flex: 1;
	background-color: #fff;
	border-radius: 12rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
}

.product-image-container {
	position: relative;
	width: 100%;
	height: 200rpx;
}

.product-svg {
	width: 100%;
	height: 100%;
}

.product-badge {
	position: absolute;
	top: 8rpx;
	left: 8rpx;
	background-color: #ff4757;
	padding: 4rpx 8rpx;
	border-radius: 4rpx;
}

.badge-text {
	font-size: 18rpx;
	color: #fff;
	font-weight: bold;
}

.product-details {
	padding: 16rpx;
}

.product-header {
	display: flex;
	align-items: center;
	gap: 8rpx;
	margin-bottom: 8rpx;
}

.product-tag {
	background-color: #4CAF50;
	padding: 2rpx 6rpx;
	border-radius: 4rpx;
	flex-shrink: 0;
}

.product-tag .tag-text {
	font-size: 18rpx;
	color: #fff;
	font-weight: bold;
}

.product-shop {
	font-size: 20rpx;
	color: #666;
}

.product-time {
	font-size: 20rpx;
	color: #666;
}

.product-title {
	font-size: 24rpx;
	font-weight: bold;
	color: #333;
	line-height: 1.3;
	margin-bottom: 12rpx;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.product-pricing {
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.product-discount {
	font-size: 20rpx;
	color: #ff4757;
}

.product-price-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.current-price {
	font-size: 28rpx;
	font-weight: bold;
	color: #ff4757;
}

.original-price {
	font-size: 20rpx;
	color: #999;
	text-decoration: line-through;
	margin-left: 8rpx;
}

.member-tag {
	background-color: #ff9500;
	padding: 4rpx 8rpx;
	border-radius: 4rpx;
	flex-shrink: 0;
}

.member-text {
	font-size: 18rpx;
	color: #fff;
}
</style>

